<template>
  <div class="download-header">
    <div class="region header">
      <van-image :src="titleImg"></van-image>
    </div>
    <div class="region credit-tip">专项礼包分期、限时免息、可发货</div>
    <div class="region credit">{{ creditText }}</div>
    <div class="region steps">
      <div v-for="(item, index) in stepsArr" :key="index" class="step">
        <van-image :src="item.img" width="50" height="50"></van-image>
        <span class="step-text">{{ item.text }}</span>
      </div>
    </div>
    <div class="region btn">
      <van-button block round color="#FFEECB" @click="onClick">
        <span class="btn-text">马上使用</span>
      </van-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
//   import headerImg from "@/assets/auth-header-img.png";
//   import headerText from "@/assets/auth-header-text.png";
import titleImg from "@/assets/image/donwload-title.png";
import step1Img from "@/assets/image/download-step1.png";
import step2Img from "@/assets/image/download-step2.png";
import step3Img from "@/assets/image/download-step3.png";
import { showToast } from "vant";

const props = defineProps({
  userCreditLimit: {
    type: Number,
    default: 5000,
  },
});

const emits = defineEmits(["goShopping"]);

const stepsArr = ref([
  { img: step1Img, text: "安全可靠" },
  { img: step2Img, text: "方便快捷" },
  { img: step3Img, text: "灵活借还" },
]);

onMounted(async () => {});

const creditText = computed(() => {
  return props.userCreditLimit > 0
    ? `${props.userCreditLimit}元`
    : "综合评分不足";
});

const onClick = () => {
  if (props.userCreditLimit <= 0) {
    showToast("综合评分不足,无法下载app！");
  } else {
    emits("goShopping");
  }
};
</script>
<style lang="scss" scoped>
.download-header {
  position: relative;
  // background: linear-gradient(to right, #ec2c34, #f38489);
  background-color: #e61239;
  border-radius: 10px;
  // padding: 40px 20px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  .header {
    position: absolute;
    top: -44px;
    left: 0;
  }
  .credit-tip {
    font-size: 12px;
  }
  .credit {
    font-weight: bold;
    font-size: 36px;
    margin: 10px 0;
  }
  .btn {
    margin-top: 20px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // width: 86%;
    // margin: 20px 0;
    &-text {
      color: #fd2f70;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .region {
  }
  .steps {
    display: flex;
    justify-content: space-between;
    .step {
      display: flex;
      flex-direction: column;
      &-text {
        font-size: 10px;
      }
    }
  }
}
</style>
